/*
 * @Title: 申诉模块
 * @Created by: gsjPC 
 */
<template>
	<view class="shensuBody" >
		<comHeader :config="navConfig"/>
		<view style="width: 100%;height: 120upx;background: #FFFFFF;"></view>
		<view class="shensu-body">
			<view class="dlWrap">
				<view class="dlInput_psd">
					<view class="dlInput_numb">
					<text>设置密码</text>
					<input 
					:type="isVisiblePsd0" 
					placeholder="填写密码" 
					placeholder-style="color:#CCCCCC"
					placeholder-class="placecLass"
					@input="focusClass1"
					:class="[true ? 'blueBorder' : '']"/>
					</view>
					<view @tap="eyeBtn0"><image :src="isVisiblePsd0 == 'password' ? '/static/psdeye1.png' : '/static/psdeye0.png'"></image></view>
					<!-- <view><uni-icon type="arrowdown" size="20" color="#A7A7A7"></uni-icon></view> -->
				</view>
				<!-- 密码登录 -->
				<view class="dlInput_psd">
					<view class="dlInput_numb">
					<text>确认密码</text>
					<input 
					:type="isVisiblePsd1"
					placeholder="再次确认密码" 
					placeholder-style="color:#CCCCCC"
					placeholder-class="placecLass"
					@input="focusClass2"
					:class="[true ? 'blueBorder' : '']"/>
					</view>
					<view @tap="eyeBtn1"><image :src="isVisiblePsd1 == 'password' ? '/static/psdeye1.png' : '/static/psdeye0.png'"></image></view>
				</view>
				<view class="nextStep" @tap="nextStep">确认</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					left:{
						text:'',  
						isShowLeft:true,
						leftGobackColor:'black',
						leftTextColor:'black',
					},
					mid:{
						isShowMid:true,
						text:'申诉找回账号密码'
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				listData:[
					'申诉适用范围：不能通过绑定的手机/邮箱/账号登陆，及忘记密码的 用户',
					'申诉过程会发送验证码至可用手机号，并设置新密码',
					'申诉成功后可返回直接登陆'
				],
				isVisiblePsd0:'password',//密码登录是否可见
				isVisiblePsd1:'password',//再次确认密码登录是否可见
			}
		},
		methods:{
			nextStep(){
				uni.navigateTo({
					url:'/pages/login/ssResult'
				})
			},
			eyeBtn0(){
				if(this.isVisiblePsd0 == 'password'){
					this.isVisiblePsd0 = 'text'
					}else{
					this.isVisiblePsd0 = 'password'
					}
			},
			eyeBtn1(){
				if(this.isVisiblePsd1 == 'password'){
					this.isVisiblePsd1 = 'text'
					}else{
					this.isVisiblePsd1 = 'password'
					}
			}
		}
	}
</script>

<style>
	.shensuBody{
		background: rgba(246,246,246,1.00);
		top: 0;
		width: 100%;
		overflow: hidden;
		height: 100vh;
		
	}
	.nextStep{
		width: 612upx;
		margin-left: auto;
		margin-right: auto;
			height: 88upx;
			line-height: 88upx;
			border-radius:88upx;
			font-size: 28upx;
			background: linear-gradient(left,#54AAFF,#568FFF);
			text-align: center;
			color: #ffffff;
		
			margin-top:110upx;
	}
	.shensu-body{
		width: 750upx;
		height: 100vh;
		overflow: hidden;
		display: table;
		background: #FFFFFF;
		border-top: rgba(246,246,246,1.00) solid 15upx;
		/* margin-top: 140upx; */
		padding-bottom: 40upx;
	}
	.dlWrap{
		margin:128upx 44upx 0 44upx;
	}
	.logTypeBotm{
		width: 100%;
		position: absolute;
		bottom:42upx;
		left:-50%;
		margin-left: 50%;
		display: flex;
		justify-content: center;
	}
	.logTypeBotm image{
		width:58upx;
		height: 58upx;
		margin-left:72upx;
	}
	.logTypeBotm image:first-child{
		margin-left: 0;
	}
	
	.changeLoginType{
		color: #549BFF;
		font-size:24upx;
		margin-top:66upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		padding: 10upx;
		padding-right: 0;
	}
	.loginMethod{
		margin-top: 28upx;
		color: #999;
		font-size: 24upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.loginMethod .line{
		font-weight: 500;
		margin:0 10upx;
	}
	.loginMethod text{
		padding:10upx;
	}
	.dlInput_numb{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.dlInput_psd{
		margin-top: 76upx;
		padding-bottom:20upx;
		height:46upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: 1upx solid #DCDCDC;
		justify-content: space-between;
	}
	.dlInput_psd text{
		color: #333333;
		font-size: 28upx;
	}
	.dlInput_psd input{
		margin-left:70upx;
		height:46upx;
		line-height:46upx;
		color: #333;
		font-size: 28upx;
	}
	.dlInput_psd view image{
		padding:0 12upx;
		max-width:37upx;
		max-height:30upx;
	}
	/* .blueBorder{
		border-bottom: 1upx solid #55A0FF!important;
	} */
	.goIndex{
		height: 88upx;
		line-height: 88upx;
		border-radius:88upx;
		font-size: 28upx;
		background: linear-gradient(left,#54AAFF,#568FFF);
		text-align: center;
		color: #ffffff;
		margin-top:110upx;
	}
	.smallBtn{
		color: #559EFF;
		font-size: 24upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 66upx;
	}
	.forPsd{
		padding:10upx;
		padding-left:0;
	}
	.goReg{
		color: #999999;
		}
	.goReg text{
		color: #559EFF;
		padding:10upx;
	}
	.goReg text:last-child{
		padding-right:0;
	}
	.getYzm{
		width:190upx;
		height: 63upx;
		line-height: 63upx;
		background: #559DFF;
		border-radius: 10upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 24upx;
	}
</style>
